.main {
    flex    : 1;
    position: relative;

    video {
        width : 100%;
        height: 100%;
    }

    .vIntroduce {
        width          : 200px;
        height         : 150px;
        position       : absolute;
        left           : 25px;
        bottom         : 36px;
        display        : flex;
        flex-direction : column;
        justify-content: center;
        font-size      : 24px;
    }
}

footer {
    height  : 90px;
    position: relative;

    div {
        height          : 10px;
        width           : 100%;
        background-color: #ccc;
        position        : absolute;
        top             : -10px;
        left            : 0px;

        h4 {
            height          : 10px;
            background-color: skyblue;
            width           : 0%;
        }
    }

    i {
        flex       : 1;
        text-align : center;
        line-height: 90px;
        font-size  : 36px !important;
    }
}

.mask {
    width           : 100%;
    height          : 100%;
    position        : fixed;
    top             : 0;
    left            : 0;
    background-color: rgba(21, 146, 204, 0.7);
    display         : flex;
    align-items     : center;
    justify-content : center;
    visibility      : hidden;

    a {
        display        : flex;
        flex-direction : column;
        align-items    : center;
        justify-content: center;
        width          : 120px;
        height         : 120px;
        border-radius  : 50%;
        color          : #fff;

        &:nth-of-type(1) {
            background-color: #79F0C2;
        }

        &:nth-of-type(2) {
            background-color: #FF6060;
            margin-left     : 20px;
        }

        i {
            font-size: 40px;
        }

        span {
            font-size: 18px;
        }
    }
}